<template>
	<div v-loading="tableLoading" element-loading-spinner="el-icon-loading">
		<el-row>
			<el-col :span="11">
				<el-descriptions :column="1" border>
					<el-descriptions-item
						v-for="(item, index) in columnsPlus"
						:key="'column_' + index"
					>
						<template slot="label">
							<div class="label">{{ item.label }}</div>
						</template>
						<div v-if="item.solt === 'numberSolt'">
							<el-link
								type="primary"
								:underline="false"
								@click="handleClick(item)"
							>
								<span
									:style="
										item.noLink &&
										handleNumberColor(detail[item.prop])
									"
									:class="item.noLink ? '' : 'underline'"
								>
									{{
										handleNumber(
											'USDT',
											detail[item.prop],
											2,
											true,
											true
										)
									}}
								</span>
							</el-link>
						</div>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ detail[item.prop] || '-' }}
							</span>
						</div>
					</el-descriptions-item>
				</el-descriptions>
			</el-col>
			<el-col :span="11" :offset="2">
				<el-descriptions :column="1" border>
					<el-descriptions-item
						v-for="(item, index) in columnsReduce"
						:key="'column_' + index"
					>
						<template slot="label">
							<div class="label">{{ item.label }}</div>
						</template>
						<div v-if="item.solt === 'numberSolt'">
							<el-link
								type="primary"
								:underline="false"
								:style="
									item.noLink &&
									handleNumberColor(detail[item.prop])
								"
								@click="handleClick(item)"
							>
								<span
									:style="
										item.noLink &&
										handleNumberColor(detail[item.prop])
									"
									:class="item.noLink ? '' : 'underline'"
								>
									{{
										handleNumber(
											'USDT',
											detail[item.prop],
											2,
											true,
											true
										)
									}}
								</span>
							</el-link>
						</div>
						<div v-if="item.solt === 'defaultSolt'">
							<span>
								{{ detail[item.prop] || '-' }}
							</span>
						</div>
					</el-descriptions-item>
				</el-descriptions>
			</el-col>
		</el-row>

		<!-- <el-table
			v-loading="tableLoading"
			ref="elTable"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table mb20"
			:max-height="tableHeight"
			:data="tableData"
			v-bind="$attrs"
			v-on="$listeners"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				v-for="(item, index) in columns"
				:key="'column_' + index"
				:prop="columns[index].prop"
				:align="item.alignCenter"
				:label="item.label"
				:min-width="item.minWidth"
				:fixed="item.isFixed"
				:sortable="item.isSortColumn"
				:show-overflow-tooltip="item.isShowTip"
			>
				<template slot="header">
					<span v-if="item.itemTipContent">
						{{ item.label }}
						<el-tooltip
							class="item"
							effect="dark"
							:content="item.itemTipContent"
							placement="top-start"
						>
							<i class="el-icon-question"></i>
						</el-tooltip>
					</span>
					<span v-else>
						{{ item.label }}
					</span>
				</template>
				<template slot-scope="{ row }">
					<div v-if="item.solt === 'numberSolt'">
						<span
							:style="handleNumberColor(row[columns[index].prop])"
						>
							{{
								handleNumber(
									'USDT',
									row[columns[index].prop],
									2,
									true,
									true
								)
							}}
						</span>
					</div>
					<div v-if="item.solt === 'defaultSolt'">
						<span>
							{{ row[columns[index].prop] || '-' }}
						</span>
					</div>
				</template>
			</el-table-column>
		</el-table> -->
	</div>
</template>

<script>
import list from '@/mixins/list'

export default {
  mixins: [list],
  props: {
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    detail: {
      type: Object,
      default: () => { }
    },
    columns: {
      type: Array,
      default: () => []
    },
    columnsPlus: {
      type: Array,
      default: () => []
    },
    columnsReduce: {
      type: Array,
      default: () => []
    },
    userType: {
      type: Number,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableHeight: 480
    }
  },
  methods: {
    handleClick(item) {
      if (item.noLink) {
        return false
      } else {
        if (this.userType == '1') {
          if (this.type == 'agent') {
            this.$router.push({
              path: '/funds/proxyFundsRecord/proxyAccountChangeRecord',
              query: {
                parentProxyName: this.name,
                parentProxyType: 1
              }
            })
          } else if (this.type == 'member') {
            this.$router.push({
              path: '/funds/memberFundsRecord/memberAccountChangeRecord',
              query: {
                userType: this.userType,
                userName: this.name,
                parentProxyType: 1
              }
            })
          }
        } else if (this.userType == '0') {
          this.$router.push({
            path: '/funds/memberFundsRecord/memberAccountChangeRecord',
            query: {
              userName: this.name
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.underline {
	text-decoration: underline;
}
</style>
